import Vue from 'vue'
import VueRouter from 'vue-router'
// // 引入登录组件
// import Login from '../views/login/login.vue'
// // 引入layoutz组件
// import Layout from '../views/layout/layout.vue'
// // 引入主页路由组件
// import Home from '../views/home/home.vue'
// // 引入文章页路由组件
// import Articles from '../views/article/article.vue'
// // 引入素材页路由组件
// import Images from '../views/images/images.vue'
// // 引入内容编辑页路由组件
// import Edit from '../views/edit/edit.vue'
// // 引入发布文章页路由组件
// import addArticle from '../views/article/addArticle.vue'
// // 引入评论管理页路由组件
// import Comment from '../views/comment/comment.vue'
// // 引入粉丝管理页路由组件
// import Fans from '../views/fans/fans.vue'
// // 引入用户管理页路由组件
// import Settings from '../views//settings/settings.vue'
const Login = () => import(/* webpackChunkName: "login" */ '../views/login/login.vue')

const Layout = () => import(/* webpackChunkName: "Layout" */ '../views/layout/layout.vue')
const Images = () => import(/* webpackChunkName: "Images" */ '../views/images/images.vue')
const ArticlesList = () => import(/* webpackChunkName: "Articles" */ '../views/articles/articleList.vue')
const Home = () => import(/* webpackChunkName: "Home" */ '../views/home/home.vue')
const Edit = () => import(/* webpackChunkName: "Edit" */ '../views/edit/edit.vue')
const AddArticle = () => import(/* webpackChunkName: "AddArticle" */ '../views/articles/addArticle.vue')
const Comments = () => import(/* webpackChunkName: "Comments" */ '../views/comments/comments.vue')
const Fans = () => import(/* webpackChunkName: "Fans" */ '../views/fans/fans.vue')
const Settings = () => import(/* webpackChunkName: "Fans" */ '../views/settings/settings.vue')
// 集成路由中间件
Vue.use(VueRouter)

const routes = [
  { path: '/login', component: Login },
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '', // 对于嵌套路由来说，如果path为空，则默认显示它。
        // redirect: '/home'
        component: Home
      },
      {
        path: 'home',
        component: Home
      },
      {
        path: 'articles',
        component: ArticlesList
      },
      {
        path: 'images',
        component: Images
      },
      {
        path: 'addArticle',
        component: AddArticle
      },
      {
        path: 'edit/:id',
        component: Edit
      },
      {
        path: 'comment',
        component: Comments
      },
      {
        path: 'fans',
        component: Fans
      },
      {
        path: 'settings',
        component: Settings
      }
    ]
  }
]

const router = new VueRouter({
  routes
})
// 路由导航守卫
const vipPages = ['/', '/articles', '/images', '/home', '/edit', '/addArticle', '/comment', '/fans', '/settings']
router.beforeEach((to, from, next) => {
  // 所有路由跳转都会进入这个函数
  const tokenStr = localStorage.getItem('tokenStr')
  // 没有登录不允许访问首页及其他内容页面
  if (vipPages.includes(to.path) && !tokenStr) {
    next('/login')
  } else if (to.path === '/login' && tokenStr) {
    // 登录后不允许访问登录页
    next('/')
  } else {
    next()
  }
})

export default router
